<template>
  <div>
    <div class="container-body w">
      <div class="card-container">
        <Row :gutter="16">
          <Col span="24">
            <Card style="width:100%;margin-top:20px">
              <!-- 表单 -->
              <Alert type="success" show-icon closable v-if="isc == 2">
                您还未认证企业,企业可享受超多特权
                <span slot="desc">去认证</span>
              </Alert>
              <Alert type="success" show-icon closable v-if="isc == 0">
                您还未企业认证或实名,认证可享受更多特权
                <span slot="desc">去认证</span>
              </Alert>
              <div class>
                <Form
                  ref="formValidate"
                  :model="formValidate"
                  :rules="ruleValidate"
                  :label-width="80"
                >
                  <!-- 多企业选择发布的企业 -->
                  <FormItem label="选择企业" prop="comindex">
                    <Select v-model="formValidate.comindex" placeholder="请选择选择企业">
                      <Option
                        :value="index"
                        v-for="(item,index) in companyarr"
                        :key="index"
                      >{{item.comname}}</Option>
                    </Select>
                  </FormItem>

                  <FormItem label="招聘标题" prop="title">
                    <Input v-model="formValidate.title" placeholder="输入招聘标题"></Input>
                  </FormItem>
                  <FormItem label="职位类别" prop="jobcatindex">
                    <Select v-model="formValidate.jobcatindex" placeholder="请选择职位类别">
                      <Option
                        :value="index"
                        v-for="(item,index) in dbase.jobcat"
                        :key="index"
                      >{{item}}</Option>
                    </Select>
                  </FormItem>
                  <FormItem label="薪水范围" prop="salaryindex">
                    <Select v-model="formValidate.salaryindex" placeholder="请选择薪水范围">
                      <Option
                        :value="index"
                        v-for="(item,index) in dbase.jobsalaries"
                        :key="index"
                      >{{item}}</Option>
                    </Select>
                  </FormItem>
                  <FormItem label="招聘人数" prop="recruitnum">
                    <Input v-model="formValidate.recruitnum" placeholder="输入招聘人数"></Input>
                  </FormItem>
                  <FormItem label="描述" prop="des">
                    <Input
                      v-model="formValidate.des"
                      type="textarea"
                      :autosize="{minRows: 2,maxRows: 5}"
                      placeholder="输入你的招聘详细内容（若信息不合规，我们有权进行删除..."
                    ></Input>
                  </FormItem>
                  <!-- 职位图片 -->
                  <div class="upload-container">
                    <div class="demo-upload-list" v-for="(item,index) in uploadList" :key="index">
                      <template v-if="item.status === 'finished'">
                        <img :src="item.url" />
                        <div class="demo-upload-list-cover">
                          <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
                          <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                        </div>
                      </template>
                      <template v-else>
                        <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                      </template>
                    </div>
                    <Upload
                      ref="upload"
                      :show-upload-list="false"
                      :default-file-list="defaultList"
                      :on-success="handleSuccess"
                      :format="['jpg','jpeg','png']"
                      :max-size="2048"
                      :on-format-error="handleFormatError"
                      :on-exceeded-size="handleMaxSize"
                      :before-upload="handleBeforeUpload"
                      multiple
                      type="drag"
                      :action="upimgurl"
                      style="display: inline-block;width:58px;"
                    >
                      <div style="width: 58px;height:58px;line-height: 58px;">
                        <Icon type="ios-camera" size="20"></Icon>
                      </div>
                    </Upload>
                  </div>
                  <FormItem label="工作福利" prop="welfarelists">
                    <CheckboxGroup v-model="formValidate.welfarelists">
                      <Checkbox
                        :label="item"
                        v-for="(item,index) in dbase.welfarelist"
                        :key="index"
                      ></Checkbox>
                    </CheckboxGroup>
                  </FormItem>
                  <FormItem label="性别要求" prop="sexindex">
                    <Select v-model="formValidate.sexindex" placeholder="请选择性别要求">
                      <Option :value="index" v-for="(item,index) in dbase.sex" :key="index">{{item}}</Option>
                    </Select>
                  </FormItem>
                  <FormItem label="年龄要求" prop="ageindex">
                    <Select v-model="formValidate.ageindex" placeholder="请选择年龄要求">
                      <Option
                        :value="index"
                        v-for="(item,index) in dbase.ages"
                        :key="index"
                      >{{item}}</Option>
                    </Select>
                  </FormItem>
                  <FormItem label="学历要求" prop="degreesindex">
                    <Select v-model="formValidate.degreesindex" placeholder="请选择学历要求">
                      <Option
                        value="index"
                        v-for="(item,index) in dbase.degrees"
                        :key="index"
                      >{{item}}</Option>
                    </Select>
                  </FormItem>
                  <FormItem label="工作经验" prop="experiencesindex">
                    <Select v-model="formValidate.experiencesindex" placeholder="请选择工作经验">
                      <Option
                        :value="index"
                        v-for="(item,index) in dbase.experiences"
                        :key="index"
                      >{{item}}</Option>
                    </Select>
                  </FormItem>
                  <FormItem>
                    <Button type="primary" v-if="vipfree || fabufee == 0">免费发布</Button>
                    <Button
                      type="primary"
                      @click="handleSubmit('formValidate')"
                      v-else
                    >立即发布 ¥{{fabufee}}</Button>
                    <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                  </FormItem>
                </Form>
              </div>
            </Card>
          </Col>
        </Row>
      </div>
    </div>
    <!-- 弹窗 -->
    <div class="sys-tips" v-show="tipsshow">
      <div class="inner">
        <div class="status">
          <div class="status-img">
            <img :src="statusimg" />
          </div>
        </div>
        <div class="bd">
          <div class="text1 ellips1">{{text1}}</div>
          <div class="text2 ellips2">{{text2}}</div>
          <div class="btn-group">
            <div class="sbtn" @click="onsure">{{suretext}}</div>
          </div>
        </div>
        <div class="close">
          <!-- <img src="/static/images/close.png" mode="" @click="tipstoggle"></img> -->
        </div>
      </div>
    </div>
    <!-- 微信支付二维码 -->
    <Modal v-model="modal2" width="360" :footer-hide="true">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>请使用微信扫一扫</span>
      </p>
      <div style="display: flex;text-align: center;">
        <!-- 二维码 -->
        <div id="qrCode" ref="qrCodeDiv" style="margin: 0 auto;"></div>
      </div>
    </Modal>
    <Modal v-model="modal6" fullscreen title="选择置顶" :closable="false" :footer-hide="true">
      <p>
        <Row>
          <Col span="24">
            <Card style="margin-top:20px">
              <div style="text-align:center">
                <h2 class="post-title">选择置顶</h2>
                <div class="settop">
                  <Select
                    v-model="topselect"
                    @on-change="selectchange"
                    style="width:500px;margin-top:30px;"
                  >
                    <Option
                      v-for="(item,index) in top_rules"
                      :value="index"
                      :key="index"
                    >{{ item.name }}</Option>
                  </Select>
                </div>
                <Button
                  type="error"
                  size="large"
                  @click="settop"
                  style="width:500px;margin-top:30px;"
                >立即置顶</Button>
                <div>
                  <Button
                    type="default"
                    size="large"
                    @click="backindex"
                    style="width:500px;margin-top:30px;"
                  >返回首页</Button>
                </div>
              </div>
            </Card>
          </Col>
        </Row>
      </p>
    </Modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      upimgurl: this.$http.apiurl("upimg"),
      dbase: [],
      defaultList: [],
      imgName: "",
      visible: false,
      uploadList: [],
      imgslist: "",
      imgslistarr: [],
      welfarelist: "",
      tipsshow: false,
      text1: "",
      text2: "",
      suretext: "我知道啦",
      appinfo: {},
      vipfree: false,
      uid: "",
      telnums: "",
      vips: [],
      limitstatus: 0,
      isc: 0,
      companyarr: [],
      comid: null,
      user: [],
      modal2: false,
      fabufee: "",
      statusimg: "",
      modal6: false,
      fee: "",
      time: "",
      top_rules: [],
      topselect: "",
      topid: "",

      formValidate: {
        title: "",
        jobcatindex: "",
        salaryindex: "",
        recruitnum: "",
        des: "",
        welfarelists: [],
        sexindex: "",
        ageindex: "",
        degreesindex: "",
        experiencesindex: ""
      },
      ruleValidate: {
        title: [
          {
            required: true,
            message: "招聘标题不能为空",
            trigger: "blur"
          }
        ],
        recruitnum: [
          {
            required: true,
            message: "招聘人数不能为空",
            trigger: "blur"
          }
        ],
        des: [
          {
            required: true,
            message: "请输入描述",
            trigger: "blur"
          },
          {
            type: "string",
            min: 20,
            message: "描述不能低于20字",
            trigger: "blur"
          }
        ],
        welfarelist: [
          {
            required: true,
            type: "array",
            min: 1,
            message: "至少选择一项",
            trigger: "change"
          }
        ]
      }
    };
  },
  created() {
    var that = this;

    that.$axios.get(that.$http.apiurl("mpinfo")).then(res => {
      console.log(res.data);
      this.dbase = res.data.dbase;
    });

    that.$axios.get(that.$http.apiurl("ginfo") + "&op=appinfo").then(res => {
      console.log(res.data);
      that.appinfo = res.data;
      var appinfo = that.appinfo;

      this.top_rules = [
        {
          name: "置顶1天(收费" + appinfo.tops.oneday + "元)",
          fee: appinfo.tops.oneday,
          time: 1,
          index: "0",
          check: true
        },
        {
          name: "置顶3天(收费" + appinfo.tops.theday + "元)",
          fee: appinfo.tops.theday,
          time: 3,
          index: "1"
        },
        {
          name: "置顶7天(收费" + appinfo.tops.sevday + "元)",
          fee: appinfo.tops.sevday,
          time: 7,
          index: "2"
        },
        {
          name: "置顶15天(收费" + appinfo.tops.fiftday + "元)",
          fee: appinfo.tops.fiftday,
          time: 15,
          index: "2"
        },
        {
          name: "置顶1个月(收费" + appinfo.tops.onemoth + "元)",
          fee: appinfo.tops.onemoth,
          time: 30,
          index: "3"
        }
      ];
      this.fee = this.top_rules[0].fee;
      this.time = this.top_rules[0].time;
      console.log(this.top_rules);
    });

    // console.log(that.$store.getters.userInfo);
    console.log(JSON.parse(localStorage.getItem("user_info")));
    if (!localStorage.getItem("user_info")) {
      console.log(localStorage.getItem("user_info"));
      that.$Message.error("未登陆,请登陆!");
      that.$router.push({ name: "login", query: {} });
    } else {
      that.uid = JSON.parse(localStorage.getItem("user_info")).id;
      that.telnums = JSON.parse(localStorage.getItem("user_info")).telnum;
    }

    if (that.uid) {
      that.$http
        .aget("authdata", {
          uid: that.uid
        })
        .then(res => {
          console.log(res);
          if (res.company.length > 0) {
            this.isc = 1;
            this.companyarr = res.company;
            this.comid = res.company[0].id;
          } else if (res.user.length > 0) {
            this.isc = 2;
            this.user = res.user[0];
          } else {
            this.isc = 0;
          }
          console.log(this.companyarr);
        });
    }
    that.checkvip(), that.checklimit();
  },
  methods: {
    SQRCode: function(fee) {
      document.getElementById("qrCode").innerHTML = "";
      // window.location.protocol+"//"+window.location.host
      var qrurl =
        "https://open.ls11.cn/app/index.php?i=52&c=entry&do=pcpay&m=lshd_zhaopinhign&telnum=" +
        this.telnums +
        "&fee=" +
        fee;
      console.log(qrurl);
      new this.$qrcode(this.$refs.qrCodeDiv, {
        text: qrurl,
        width: 200,
        height: 200,
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: this.$qrcode.CorrectLevel.L //容错率，L/M/H
      });
    },
    // 查询是否有VIP
    checkvip() {
      var that = this;
      console.log(that.uid);
      that.$http.apost("svip", { op: "vipinfo", uid: that.uid }).then(res => {
        console.log(res);
        that.vips = res;
        if (res.znum > 0) {
          that.vipfree = true;
        }
      });
    },
    // 查询次数
    checklimit() {
      var that = this;
      that.$http
        .apost("limit", {
          uid: that.uid
        })
        .then(res => {
          console.log(res);
          if (res <= that.appinfo.tops.limit) {
            that.limitstatus = 1;
            that.vipfree = true;
          } else {
            that.limitstatus = 0;
          }
        });
    },
    handleSubmit(name) {
      var full = this.formValidate;
      var that = this;
      full.imgs = that.imgsstring;
      full.uid = that.uid;
      that.welfarelist = full.welfarelists.join(",");
      full.choseWelfare = that.welfarelist;
      full.imgs = that.imgslist;
      full.isc = this.isc;
      if (this.isc == 1) {
        full.comid = this.comid;
      }
      if (this.isc == 2) {
        full.comid = this.user.id;
      }
      console.log(full);
      that.$refs[name].validate(valid => {
        if (valid) {
          if ((that.limitstatus = 1 && that.limitstatus > 0)) {
            that.postdata(full);
          } else if (that.vips.znum > 0) {
            that.postdata(full);
            // 减掉会员卡znum
            that.$http
              .apost("cardnum", {
                op: "znum",
                uid: that.uid
              })
              .then(res => {
                console.log("减掉会员卡znum");
              });
          } else if (that.fabufee == 0) {
            that.postdata(full);
          } else {
            that.$Message.error("您需要支付发布费用" + that.fabufee);
            that.modal2 = true;
            that.getPayResult(full);
          }
        } else {
          that.$Message.error("失败,请检查!");
        }
      });
    },
    getPayResult(full) {
      var that = this;
      this.$http
        .aget("ginfo&op=getpcpay&telnum=" + this.telnums)
        .then(payre => {
          console.log(payre);
          if (payre) {
            that.postdata(full);
            // 弹框消失
            that.modal2 = false;
            that.$Message.error("支付成功");
          } else {
            setTimeout(function() {
              that.getPayResult(full);
            }, 1000);
          }
        });
    },
    postdata(full) {
      this.$http.apost("post", full).then(res => {
        console.log(res);
        if (res > 0) {
          this.topid = res;
          this.$Message.success("提交成功!");
          this.tipsshow = true;
          (this.text1 = "提交招聘成功"),
            (this.text2 = "提交招聘成功"),
            (this.suretext = "我知道啦");
        } else {
          this.$Message.error("失败,请检查!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },

    handleView(name) {
      this.imgName = name;
      this.visible = true;
    },
    handleRemove(file) {
      const fileList = this.$refs.upload.fileList;
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
    },
    handleSuccess(res, file) {
      console.log(res);
      if (this.uploadList) {
        this.imgslistarr.push(res);
        this.imgslist = this.imgslistarr.join(",");
      } else {
        var imgs = [];
        imgs.push(res2.data);
        that.imgslistarr = imgs;
        that.imgslist = imgs;
      }

      file.url = res;
      file.name = "";
    },

    handleFormatError(file) {
      this.$Notice.warning({
        title: "文件格式不正确",
        desc:
          "文件名为 " + file.name + " 的文件格式不正确,请上传jpg 或 png的格式"
      });
    },
    tipstoggle() {
      this.tipsshow = false;
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: "文件大小超出限制",
        desc: "文件名为  " + file.name + " 过大, 请不要超过5M."
      });
    },
    handleBeforeUpload() {
      const check = this.uploadList.length < 5;
      if (!check) {
        this.$Notice.warning({
          title: "Up to five pictures can be uploaded."
        });
      }
      return check;
    },
    // 我知道啦按钮
    onsure() {
      this.modal6 = true;
    },
    selectchange(e) {
      this.fee = this.top_rules[e].fee;
      this.time = this.top_rules[e].time;
      console.log(this.fee);
    },
    // 设置置顶
    settop() {
      var that = this;
      // 微信支付
      this.modal2 = true;
      this.SQRCode(that.fee);
      this.getPayResult();
    },
    backindex() {
      this.$router.push({ name: "index", query: {} });
    }
  },
  mounted() {
    console.log("mounted");
    this.SQRCode(this.$store.getters.gappinfo.tops.fabufee);
    this.uploadList = this.$refs.upload.fileList;
    this.fabufee = this.$store.getters.gappinfo.tops.fabufee;
  }
};
</script>
<style lang="scss">
.card-container {
  background-color: #fff;
  padding: 10px;
  margin-top: 50px;
}
.upload-container {
  width: 100%;
  padding: 20px 0 20px 80px;
}
.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 10px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}

.qrCode {
  margin: 0 auto;
}
</style>
